<template>
	<a-modal :visible="visible" title="支付二维码" :footer="null" :width="500" @cancel="onCancel">
		<div class="text-center">
			<div class="flex text-yellow-500 text-[18px]">
				<exclamation-circle-outlined class="relative top-[5px]" />
				<span class="pl-[10px] text-justify"
					>该二维码用于客户线上签约付款时使用，请将二维码发给客户并于30分钟内完成支付，失效请点击按钮【重新生成】再次生成二维码进行支付</span
				>
			</div>
			<a-spin :spinning="spinning" tip="刷新中...">
				<div ref="payImgRef" class="w-[340px] h-[340px] m-auto">
					<vue-qrcode v-if="imgUrl" :value="imgUrl" tag="img" :options="{ width: 340, margin: 2 }" />
				</div>
			</a-spin>
			<a-space>
				<a-button type="primary" @click="onRefresh">重新生成</a-button>
				<a-button type="primary" @click="onDownload">下载</a-button>
			</a-space>
		</div>
	</a-modal>
</template>
<script setup>
	import VueQrcode from '@chenfengyuan/vue-qrcode'
	import downloadUtil from '@/utils/downloadUtil'
	import contractApi from '@/api/biz/bizContractApi'

	const emits = defineEmits(['finished'])

	const visible = ref(false)
	const spinning = ref(true)
	const contractCode = ref('')
	const imgUrl = ref('')

	const getCodeUrl = () => {
		spinning.value = true
		contractApi.payUrl({ contractCode: contractCode.value }).then((res) => {
			visible.value = true
			spinning.value = false
			imgUrl.value = res
		})
	}

	const onOpen = (code) => {
		contractCode.value = code
		imgUrl.value = ''
		getCodeUrl()
	}

	const onCancel = () => {
		visible.value = false
		emits('finished')
	}

	/**
	 * 重新生成
	 */
	const onRefresh = () => {
		getCodeUrl()
	}

	/**
	 * 下载
	 */
	const payImgRef = ref(null)
	const onDownload = () => {
		downloadUtil.urlDownload(payImgRef.value.querySelector('img').src, '支付二维码.png')
	}

	defineExpose({
		onOpen
	})
</script>
<style lang="less" scoped></style>
